<template>
	<div class="base">
		<!--基本信息-->
		<div class="main_header" v-if="filter.type != 'DangerLevel'">
			<div class="company_name">
				<div v-if="list.length">{{ list[0].Configs[0].Value }}</div>
				<img style="width: 20px; height: 20px" src="@/assets/Images/AppIcon/icon_qrcode_small.png" alt=""
					@click="goQRCode(list[0].Configs[0].Value)" />
			</div>
		</div>

		<div style="padding: 10px">
			<div v-for="(item, index) in list" :key="index">
				<!-- 基本信息 -->
				<div class="base_info" v-if="item.FieldName == 'Master'">
					<div class="info_box">
						<div>{{ item.Display }}</div>
						<img src="@/assets/Images/AppIcon/fragment_noticetype_5.png" alt=""
							@click="editBaseInfo(item)" />
					</div>
					<van-divider />
					<div class="introduce_box">
						<div class="logo">
							<img :src="list[0].Configs[14].Value ? baseUrl + list[0].Configs[14].Value : require('@/assets/Images/AppIcon/common_defaultpicture.png')"
								alt="" />
						</div>
						<div class="sort">
							<div v-for="(item1, index1) in item.Configs" :key="index1">
								<div class="mb-10" v-if="item1.FieldName === 'EnterpriseName'">
									{{ item1.Value }}
								</div>
								<div class="sort_item" v-if="item1.FieldName === 'RegisterDate'">
									<div>
										<img src="@/assets/Images/AppIcon/icon_list_date.png" alt="" />
									</div>
									<div>{{ item1.Value || '未设置' }}</div>
								</div>
								<div class="sort_item industry" v-if="item1.FieldName == 'ApplyProfession'">
									<div style="display:flex">
										<img src="@/assets/Images/AppIcon/icon_list_industry.png" alt="" />
										<div class="trade">{{ trade }}</div>
									</div>
									<span style="color: #1989fa" @click="changeIndustry">切换行业</span>
								</div>
								<div class="sort_item" v-if="item1.FieldName == 'Address'" @click="toMap()">
									<div>
										<img src="@/assets/Images/AppIcon/icon_list_area.png" alt="" />
									</div>
									<div style="color: #1989fa">{{ item1.Value }}</div>
								</div>
							</div>
						</div>
					</div>
					<div>
						<div v-if="isOpen" class="open" @click="openList">
							展开更多
							<van-icon name="arrow-down" color="#1989fa" />
						</div>
						<div v-else>
							<van-divider />
							<div v-for="(item1, index1) in item.Configs" :key="index1">
								<div v-if="item1.FieldName !== 'EnterpriseName' &&
			item1.FieldName !== 'RegisterDate' &&
			item1.FieldName !== 'ApplyProfession' &&
			item1.FieldName !== 'BelongAreaCode' &&
			item1.FieldName !== 'Address' &&
			item1.FieldName !== 'Lng' &&
			item1.FieldName !== 'Lat' &&
			item1.FieldName !== 'Logo' &&
			item1.FieldName !== 'DormitorySingleMaxCnt'
			">
									<van-row class="mb-10" v-if="item1.Value">
										<van-col offset="1" span="9">{{ item1.Display }}</van-col>
										<van-col offset="1" span="13">
											<div>

												<img v-if="item1.FieldName === 'Attachs'"
													style="width: 50px; height: 50px" :src="baseUrl + item1.Value"
													alt="" />
												<div v-else-if="item1.Type === 'MultiImage'">
													<img v-for="(item2, index2) in item1.Value.split(';')" :key="index2"
														style="width: 50px; height: 50px;margin-left: 5px;"
														:src="baseUrl + item2" alt="" />
												</div>
												<!-- <div v-else-if="
													item1.FieldName === 'ManagementState' ||
													item1.FieldName === 'CompanyNatureDefault' ||
													item1.FieldName === 'EnterpriseScale' ||
													item1.FieldName === 'FactoryOwnership' ||
													item1.FieldName === 'LeasingMode' ||
													item1.FieldName === 'IsDormitory'
													"> -->

												<div v-else-if="item1.Type === 'Radio'">
													<span v-for="(item2, index2) in item1.ParamList" :key="index2">
														<span v-if="item1.Value === item2.ID">{{ item2.Name }}</span>
													</span>
												</div>
												<div v-else-if="item1.Type === 'Checkbox'">
													{{ item1.Value2 }}{{ item1.Unit || '' }}
												</div>
												<div v-else>
													{{ item1.Value }}{{ item1.Unit || '' }}
												</div>
											</div>
										</van-col>
									</van-row>
								</div>
							</div>

							<div class="open" @click="closeList">
								点击收起
								<van-icon name="arrow-up" color="#1296db" />
							</div>
						</div>
					</div>
				</div>
				<!--管理人员  -->
				<div class="manage_info" v-if="item.FieldName == 'Manager'">
					<div class="manage_box">
						<div>{{ item.Display }}</div>
						<!--<div>风险管理信息</div>-->
						<img src="@/assets/Images/AppIcon/fragment_noticetype_5.png" alt="" @click="editUser(item)" />
					</div>
					<div>
						<van-divider />
						<div class="none" v-if="item.Configs.every((v) => !v.Value)">
							尚未填写
						</div>
						<div v-else>
							<div v-for="(item1, index1) in item.Configs" :key="index1">
								<div v-if="item1.FieldName !== 'LegalEmail' &&
			item1.FieldName !== 'ManagerEmail' &&
			item1.FieldName !== 'EhsEmail'
			">
									<van-row class="mb-10" v-if="item1.Value">
										<van-col offset="1" span="9">{{ item1.Display }}</van-col>
										<van-col offset="1" span="13">
											<div>
												<div v-if="item1.FieldName === 'IsEHSOrganization' ||
			item1.FieldName === 'IsEHS' ||
			item1.FieldName === 'IsEHSPartTime' ||
			item1.FieldName === 'IsEHSRegisteredEngineer' ||
			item1.FieldName === 'IsEHSEmergency' ||
			item1.FieldName === 'Extra28'
			">
													<span v-for="(item2, index2) in item1.ParamList" :key="index2">
														<span v-if="item1.Value === item2.ID">{{ item2.Name }}<span
																v-if="item1.RelatedFieldValue">,{{
			item1.RelatedFieldValue }}{{
			item1.RelatedFieldUnit }}</span></span>

													</span>
												</div>

												<div v-else>
													{{ item1.Value }}{{ item1.Unit || '' }}
												</div>
											</div>
										</van-col>
									</van-row>
								</div>
							</div>
						</div>
					</div>
				</div>

				<!--关键风险点-->
				<!-- <div class="manage_info" v-if="item.FieldName == 'RiskPointInfo'"> -->
				<div class="manage_info" v-else-if="item.Type == 'Many'">
					<div style="font-size: medium;margin-bottom: 10px;">{{ item.Display }}</div>

					<div v-for="(item1, index1) in item.Configs" :key="index1">
						<div v-if="item.FieldName == 'RiskPointInfo'">
							<div v-for="(item2, index2) in Value" :key="index2">
								<div v-if="item1.RiskCode == item2">
									<van-divider />
									<CompanyEditItem :item1="item1" :FieldName="item.FieldName" @callback="CallBack">
									</CompanyEditItem>
								</div>
							</div>
						</div>
						<div v-else>
							<van-divider />
									<CompanyEditItem :item1="item1" :FieldName="item.FieldName" @callback="CallBack">
									</CompanyEditItem>
						</div>
					</div>
					<div>

					</div>

				</div>
				<!--特殊作业-->

				<!--证书信息  Type=Special -->
				<div class="manage_info" v-else-if="item.Type == 'Special' || item.FieldName == 'RiskManagerInfo'">
					<div class="manage_box">
						<div class="mb-20">{{ item.Display }}</div>
						<img src="@/assets/Images/AppIcon/fragment_noticetype_5.png" alt=""
							@click="editSpecialOperation(item.FieldName, item)" />
					</div>
					<div v-if="item.Configs">
						<div class="none" v-if="item.Configs.every((v) => !v.Value)">
							尚未填写
						</div>
						<div v-else>
							<div v-for="(item3, index3) in item.Configs" :key="index3">
								<div v-if="item3.Value && item3.Value.length">
									<CompanyEditChildItem :item3="item3"></CompanyEditChildItem>
								</div>
							</div>
						</div>
					</div>

				</div>
			</div>
		</div>
	</div>
</template>
<script>
import Tabbar from '@/components/Tabbar.vue'
import CompanyEditItem from './CompanyEditItem.vue';
import CompanyEditChildItem from './CompanyEditChildItem.vue'
import { ImagePreview } from "vant";
import { getBaseInfo, GetQueryupText } from '@/api/base'
import { mapGetters } from 'vuex'

export default {
	components: {
		Tabbar,
		CompanyEditItem,
		CompanyEditChildItem
	},
	data() {
		return {
			list: [],
			activeNames: ['1'],
			border: false,
			isOpen: true,
			trade: '',
			Value: [],
			filter: {
				CompanyCode: '',
				type: ''
			},
			Industry: ''
		}
	},
	computed: {
		...mapGetters(['baseUrl', 'CompanyCode']),
	},
	created() {


		//
		if (!this.$route.query.CompanyCode) {
			this.filter.CompanyCode = this.CompanyCode
		} else {
			this.filter.CompanyCode = this.$route.query.CompanyCode
			this.filter.type = this.$route.query.type
			if (this.filter.type == 'DangerLevel') {
				this.$store.state.title = '风险信息编辑'
			}
		}
		this.getBaseInfo()
	},
	methods: {
		// 基本信息
		getBaseInfo() {
			const that = this
			this.loading = true
			getBaseInfo(this.filter)
				.then((res) => {
					this.loading = false
					res.data.forEach((item) => {
						item.Configs.forEach((item1) => {
							if (item1.FieldName == 'ApplyProfession') {
								this.GetQueryupText(item1.Value)
							} else
								if (item1.FieldName == 'RiskPointEng') {
									that.Value = item1.Value.split(',')
									item1.Value = that.Value
								} else if (item1.FieldName == 'Lng') {
									this.Lng = item1.Value
								} else if (item1.FieldName == 'Lat') {
									this.Lat = item1.Value
								}
							if (item1.Type == 'Checkbox') {
								let value2 = []
								item1.ParamList.forEach(element => {
									if (item1.Value && item1.Value.includes(element.ID)) {
										console.log(element.Name)
										value2.push(element.Name)
									}
								});
								item1.Value2 = value2 ? value2.join(',') : ''

							}

						})

					})
					that.list = that.searchOption(res.data)
					that.list = res.data
				})
				.catch((err) => {
					console.log('err', err)
				})
		},
		toMap() {
			if (!this.Lng || !this.Lat) {
				this.$toast("未通过App端采集位置信息")
			} else {
				window.location.href = 'https://uri.amap.com/marker?position=' + this.Lng + ',' + this.Lat + '&name=' + this.list[0].Configs[0].Value + '&src=mypage&coordinate=gaode&callnative=0'
			}
		},
		toTable(item) {
			this.$router.push({
				path: 'BaseInfo/Table', query: {
					value: item.Value,
					params: item.ParamList
				}
			})
		},
		searchOption(arr) {
			for (let i = 0; i < arr.length; i++) {
				if (arr[i].Value && arr[i].ValueType) {
					console.log(arr[i])
					console.log(arr[i].Value)
					arr[i].Value = JSON.parse(arr[i].Value)
					console.log(arr[i].Value)
				}
				if (arr[i].Configs && arr[i].Configs.length > 0) {
					// 递归条件
					this.searchOption(arr[i].Configs)
				} else {
					continue
				}
			}
		},
		// 行业信息
		GetQueryupText(value) {
			this.loading = true
			this.Industry = value
			GetQueryupText({ value })
				.then((res) => {
					this.loading = false

					this.trade = res.data
				})
				.catch((err) => {
					console.log('err', err)
				})
		},
		openList() {
			this.isOpen = false
		},
		closeList() {
			this.isOpen = true
		},
		// 企业二维码
		goQRCode(value) {
			this.$router.push('/BaseInfo/QRCode?value=' + value)
		},
		// 基本信息
		editBaseInfo(item) {
			item.CompanyCode = this.$route.query.CompanyCode
			// this.$router.push({ name: 'BaseDetail', params: item })
			localStorage.setItem('CompanyEditInfo', JSON.stringify(item))
			// localStorage.setItem('MapLatLng','')
			localStorage.removeItem('MapLatLng')

			this.$router.push({ name: 'BaseDetail' })
		},
		// 切换行业
		changeIndustry() {

			this.$store.commit('setIndustry', this.Industry)
			this.$router.push('/BaseInfo/Industry?CompanyCode=' + this.filter.CompanyCode)
		},
		// 人员
		editUser(item) {
			this.$router.push({ name: 'UserManage', params: item })
		},
		// 风险
		editRisk(item) {
			this.$router.push({ name: 'RiskManage', params: item })
		},
		// 危害因素
		// editHarmFactor(item) {
		// 	this.$router.push('/BaseInfo/HarmFactor')
		// },
		editGas(item) {
			this.$router.push({ name: 'Gas', params: item })
		},
		//
		CallBack(_key, item) {
			this.editSpecialOperation(_key, item)
		},
		// 特种作业
		editSpecialOperation(_key, item) {

			item.CompanyCode = this.filter.CompanyCode
			item._key = _key
			item.type2=this.filter.type
			this.$router.push({ name: 'SpecialOperation', params: item })
		},
		showImg(imagePath) {
			let paths = [imagePath]
			ImagePreview({
				images: paths,
				startPosition: 0,
			});
		}
	},
}
</script>

<style lang="less" scoped>
.base {
	padding-top: 0;
	font-size: 14px;
	background-color: #e8f1f8;
}

.main_header {
	position: relative;
	height: 50px;
	width: 100%;
	background-color: #383d40;
	padding: 0 10px;
	border-top: 1px solid #383d40;

	.company_name {
		/*position: absolute;*/
		/*top: 50%;*/
		padding: 10px;
		height: 50px;
		align-items: center;
		background-color: #fff;
		border-radius: 10px;
		margin-top: 25px;
		display: flex;
		justify-content: space-between;
	}
}

.base_info {
	background-color: #fff;
	padding: 10px;
	border-radius: 10px;
	margin-top: 30px;
	margin-bottom: 10px;

	.info_box {
		display: flex;
		margin-bottom: 10px;
		justify-content: space-between;

		img {
			height: 15px;
			width: 15px;
		}
	}
}

.manage_info {
	background-color: #ffffff;
	padding: 10px;
	border-radius: 10px;
	margin-bottom: 10px;

	.manage_box {
		display: flex;
		margin-bottom: 10px;
		justify-content: space-between;

		img {
			height: 15px;
			width: 15px;
		}
	}
}

.introduce_box {
	display: flex;

	.logo {
		img {
			height: 60px;
			width: 60px;
			margin-right: 10px;
		}
	}

	.sort {
		width: 100%;

		.sort_item {
			display: flex;
			align-items: center;
			margin-bottom: 10px;
			line-height: 1.2;

			.trade {
				width: 150px;
			}

			img {
				height: 15px;
				width: 15px;
				margin-right: 5px;
				/*vertical-align: middle;*/
			}
		}

		.industry {
			justify-content: space-between;
		}
	}
}

.open {
	text-align: right;
	color: #1989fa;
	margin-top: 20px;
}

.perilous {
	font-size: 14px;
	line-height: 1.3;
}

.none {
	height: 40px;
	line-height: 40px;
	text-align: center;
	color: #e16358;
}
</style>
